<template>
    <div class="heat-map-box">
        <div id="map" ref="mapObj"></div>
    </div>
</template>
<script setup>

import 'ol/ol.css';
import Map from 'ol/Map';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Heatmap as HeatmapLayer} from 'ol/layer';
import View from 'ol/View';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import GeoJSON from 'ol/format/GeoJSON';

import { onMounted } from 'vue';
import { fromLonLat } from 'ol/proj';
import testHeatMap from '@/assets/testHeatMap.json';

onMounted(() => {
    const map = new Map({
        layers: [
            new TileLayer({
                source: new OSM(),
            }),
        ],
        target: 'map',
        view: new View({
            center: [0, 0],
            zoom: 2,
        }),
    });
    let features = [];
    for(let i = 0; i < testHeatMap.features.length; i++) {
        let feature = new Feature({
            geometry: new Point(fromLonLat(testHeatMap.features[i].geometry.coordinates))
        });
        features.push(feature);
    }

    // let heatMapLayer = new HeatmapLayer({
    //     source: new VectorSource({
    //         url: "/testHeatMap.json",
    //         format: new GeoJSON()
    //     })
    // })
    console.log("features", features);
    let heatMapLayer = new HeatmapLayer({
        source: new VectorSource({
            features
        })
    })
    map.addLayer(heatMapLayer)
})
</script>
<style lang="css" scoped>
.heat-map-box {
    height: 90vh;
}

#map {
    height: 100%;
}
</style>